{%extends "admin/base.html" %}

{%block breadcrumb%}
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/admin">首页</a></li>
    <li class="breadcrumb-item"><a href="/admin/system/menu/index">系统菜单管理</a></li>
    <li class="breadcrumb-item active">{{title}}</li>
</ol>
{%endblock%}

{%block main%}
<div class="row">
    <div class="col-12">
        <div class="card">
            <form class="form-horizontal">
                <div class="card-body">
                    <div class="form-group row">
                        <label for="pid" class="col-sm-2 col-form-label">
                            上级菜单
                            <span class="text-danger">*</span>
                        </label>
                        <div class="col-sm-10">
                            <select class="form-control select2" id="pid" name="pid" style="width: 100%;">
                                <option value="0">顶级菜单</option>
                                {%for v1 in menu%}
                                <option value="{{v1.id}}" {%if info.pid==v1.id %} selected="selected" {%endif%}>
                                    {{v1.title}}
                                </option>
                                {%if v1.children %}
                                {%for v2 in v1['children']%}
                                <option value="{{v2.id}}" {%if info.pid==v2.id %} selected="selected" {%endif%}>
                                    ㅤ├ㅤ{{v2.title}}
                                </option>
                                {%if v2.children %}
                                {%for v3 in v2['children']%}
                                <option value="{{v3.id}}" {%if info.pid==v3.id %} selected="selected" {%endif%}>
                                    ㅤ├ㅤㅤ├ㅤ{{v3.title}}
                                </option>
                                {%endfor%}
                                {%endif%}
                                {%endfor%}
                                {%endif%}
                                {%endfor%}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="title" class="col-sm-2 col-form-label">
                            菜单名称
                            <span class="text-danger">*</span>
                        </label>
                        <div class="col-sm-10">
                            <input type="input" class="form-control" id="title" name="title" autocomplete="off" {%if info.title %}value="{{info.title}}" {%endif%}>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="node" class="col-sm-2 col-form-label">
                            菜单链接
                            <span class="text-danger">*</span>
                        </label>
                        <div class="col-sm-10">
                            <select class="form-control" id="node" name="node" style="width: 100%;">
                                <option value="#" {%if info.node=='#' %} selected="selected" {%endif%}>#</option>
                                {%for v in node%}
                                <option value="{{v.url}}" {%if info.node==v.url %} selected="selected" {%endif%}>
                                    {{v.title}}
                                </option>
                                {%endfor%}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="parameter" class="col-sm-2 col-form-label">链接参数</label>
                        <div class="col-sm-10">
                            <input type="input" class="form-control" id="parameter" name="parameter"
                                autocomplete="false" {%if info.parameter %}value="{{info.parameter}}" {%endif%}>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="icon" class="col-sm-2 col-form-label">菜单图标</label>
                        <div class="col-sm-4 input-group">
                            <input type="input" class="form-control" id="icon" name="icon" {%if info.icon
                                %}value="{{info.icon}}" {%endif%} readonly>
                            <div class="input-group-append">
                                <span class="input-group-text">
                                    <i class="{%if info.icon %}{{info.icon}}{%else%}far fa-circle{%endif%}"></i>
                                </span>
                            </div>
                        </div>
                        <label for="color" class="col-sm-2 col-form-label">图标颜色</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="color" name="color" style="width: 100%;">
                                <option value="">请选择图标的颜色</option>
                                <option value="text-success" {%if info.color=='text-success' %} selected="selected"
                                    {%endif%}>绿色</option>
                                <option value="text-info" {%if info.color=='text-info' %} selected="selected" {%endif%}>
                                    湖绿色</option>
                                <option value="text-primary" {%if info.color=='text-primary' %} selected="selected"
                                    {%endif%}>亮色</option>
                                <option value="text-danger" {%if info.color=='text-danger' %} selected="selected"
                                    {%endif%}>红色</option>
                                <option value="text-warning" {%if info.color=='text-warning' %} selected="selected"
                                    {%endif%}>黄色</option>
                                <option value="text-muted" {%if info.color=='text-muted' %} selected="selected"
                                    {%endif%}>暗色</option>
                            </select>
                        </div>
                    </div>
                    {%if info.id > 0%}
                    <input type="hidden" name="id" value="{{info.id}}">
                    {%endif%}
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
{%endblock%}

{%block js%}
<script>
    $(function () {
        $('.select2').select2();
        $('#node').select2({ templateResult: nodeFormatState });
        $('#color').select2({ templateResult: colorFormatState });

        $('#icon').on('click', function () {
            $('#modal-url-xl').find('iframe').attr('src', '{{ url("icon") }}');
            $('#modal-url-xl').modal('toggle');
        });

        $('form').submit(function (e) {
            e.preventDefault();
            $.post('{{ url("") }}', $('form').serialize(), function (res) {
                _msg = ('msg' in res) ? res.msg : '未知错误';
                if (!('code' in res) || res.code != 0) {
                    toastr.error(_msg);
                } else {
                    toastr.success('保存成功');

                    setTimeout(() => {
                        window.location.href = '{{ url("index") }}';
                    }, 3000);
                }
            });
        });
    });

    function nodeFormatState(state) {
        if (!state.id || state.id == '#') {
            return state.text;
        }
        return $('<span class="text-success">' + state.text + '</span><span class="text-muted">' + state.id + '</span>');
    }

    function colorFormatState(state) {
        if (!state.id) {
            return state.text;
        }
        return $('<span class="' + state.id + '">' + state.text + '</span>');
    }

    function selectIcon(fonts) {
        $('#icon').val(fonts);
        $('#icon').next('div').find('i').attr('class', fonts);
        $('#modal-url-xl').modal('toggle');
    }
</script>
{%endblock%}